<template>
	<div id="home_download">
		<appVue :closeWZA="isCloseWZA()">
			<template #sectionContent>
				<routerNav class="routerNavBox" :router="router" :isNoShowImg="true"></routerNav>
				<div class="content">
					
					
					<div class="contentLeft">
						<software :detailInfo="detailInfo"></software>
						<introduce :contents="detailInfo.contents || ''"></introduce>
						<classification></classification>
					</div>
					<div class='ranks'>
						<ranking></ranking>
					</div>
					
				</div>
			</template>
		</appVue>
	</div>
</template>

<script>
import { defineAsyncComponent } from 'vue';
export default {
	components: {
		appVue: defineAsyncComponent(() => import(rootPath + '/src/app.vue')),
		myheader: defineAsyncComponent(() => import(rootPath + '/src/components/header/header.vue')),
		navs: defineAsyncComponent(() => import(rootPath + '/src/components/header/nav.vue')),
		search: defineAsyncComponent(() => import(rootPath + '/src/components/header/search.vue')),
		routerNav: defineAsyncComponent(() => import(rootPath + '/src/components/detailRouter/routerNav.vue')),
		ranking: defineAsyncComponent(() => import(rootPath + '/src/components/download/ranking2.vue')),
		software: defineAsyncComponent(() => import(rootPath + '/src/components/download/software.vue')),
		introduce: defineAsyncComponent(() => import(rootPath + '/src/components/download/introduce.vue')),
		classification: defineAsyncComponent(() => import(rootPath + '/src/components/download/classification2.vue')),
		comment: defineAsyncComponent(() => import(rootPath + '/src/components/comment/comment.vue')),
		contact: defineAsyncComponent(() => import(rootPath + '/src/components/footer/contact.vue')),
		information: defineAsyncComponent(() => import(rootPath + '/src/components/footer/information.vue')),
		backtop: defineAsyncComponent(() => import(rootPath + '/src/components/footer/backtop.vue'))
	},
	data() {
		return {
			isSearch: false,
			router: '',
			query: GetQueryString(),
			Path: getRootPath(),
			contentDetail: {},
			detailInfo: {}
		};
	},
	mounted() {
		//SEO(this.query);
		this.getContentOfChannel();
	},
	methods: {
		getContentOfChannel() {
			let param = {
				id: this.query.id
			};
			contentApi.getContentDetail(param, res => {
				if (res.code == '00000 00000') {
						this.detailInfo = res.data;
						let detailObj = {};
						res.data.instance.instanceItems.forEach(item => {
							detailObj[item.field] = item.value;
						});
						this.detailInfo.headImag = res.data.instance.instanceItems.find(item => item.field == 'headImg').value[0]?.url || {};
						let obj = res.data.instance?.instanceItems.filter(item => item.field == 'contents')[0] || {};
						let keys = Object.keys(obj.value)[0];
						this.detailInfo.contents = obj?.value[keys] || '';
						this.detailInfo.detailObj = detailObj;
						this.title = res.data.title;
						this.router = res.data.frontChannelLevelVos;

						this.description = this.contentDetail.value[this.ActiveIN].description;
				} else {
				}
			});
		},
		isCloseWZA() {
			return localStorage.getItem('close') || false;
		}
	}
};
</script>

<style scoped>
#home_download {
	/* padding-bottom: 60px; */
	/* position: relative; */
	height: fit-content;
	overflow-x:hidden ;
}
#home_download .navigation {
	width: 100%;
}

#home_download .content {
	width: 1200px;
	margin:0 auto;
	margin-top: 28px;
	background-color: #fff;
	display: flex;
	justify-content: center;
}

#home_download  .contentLeft {
	width: 840px;
	margin-right:40px;
	/* display: flex; */
}
#home_download .content .ranks {
   width:320px;
}
#home_download  .rankingBox {
	width: 1200px;
}
#home_download  .pl {
	margin-top: 60px;
}
#home_download  .pl .comment_num {
	margin-bottom: 24px;
	height: 24px;
	font-size: 24px;

	font-weight: 500;
	color: #333333;
	line-height: 24px;
}
.hotspot {
	margin-left: 40px;
}
</style>
<style>
.mhover :hover {
	color: #ff3333 !important;
	cursor: pointer;
}
#home_download  .routerNavBox {
	background: #fff;
	padding-left: 0px;
	margin: 0 auto;
	width: 1200px;
}
#home_download  .sectionContent{
	padding-top: 122px;
}
</style>
